<template>
  <view class="custom-popup" v-if="show" @click.self="onClickMask">
    <view class="custom-popup__wrapper" :class="[`custom-popup__wrapper--${position}`]">
      <view class="custom-popup__content">
        <view class="custom-popup__header">
          <text class="custom-popup__title">{{ title }}</text>
          <text class="custom-popup__close" @click="onClose">×</text>
        </view>
        <view class="custom-popup__body">
          <slot></slot>
        </view>
        <view class="custom-popup__footer" v-if="showFooter">
          <slot name="footer">
            <button class="custom-popup__btn" @click="onConfirm">{{ confirmText }}</button>
          </slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  position: {
    type: String,
    default: 'bottom',
    validator: (value) => ['bottom', 'center', 'top'].includes(value)
  },
  closeOnClickMask: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  confirmText: {
    type: String,
    default: '确定'
  }
});

const emit = defineEmits(['close', 'confirm']);

const onClose = () => {
  emit('close');
};

const onConfirm = () => {
  emit('confirm');
};

const onClickMask = () => {
  if (props.closeOnClickMask) {
    emit('close');
  }
};
</script>

<style lang="scss" scoped>
.custom-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: fadeIn 0.3s ease;
  
  &__wrapper {
    &--bottom {
      transform: translateY(0);
      animation: slideUp 0.3s ease;
    }
    
    &--center {
      align-self: center;
      animation: zoomIn 0.3s ease;
    }
    
    &--top {
      transform: translateY(0);
      justify-content: flex-start;
      animation: slideDown 0.3s ease;
    }
  }

  &__content {
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }
  
  &__header {
    position: relative;
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
  }
  
  &__title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  
  &__close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #999;
  }
  
  &__body {
    max-height: 60vh;
    overflow-y: auto;
  }
  
  &__footer {
    padding: 15px;
    border-top: 1px solid #f2f2f2;
  }
  
  &__btn {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background-color: #07c160;
    color: #fff;
    border-radius: 22px;
    font-size: 16px;
    margin: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>
